<template>
  <div class="corporateRefund_box">
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      border
    >
      <template v-for="item in tableColumn">
        <el-table-column
          :key="item.value"
          v-if="item.value!=='opt' && item.value!='usenum'"
          :prop="item.value"
          :label="item.label"
          align="center"
        ></el-table-column>
        <el-table-column
          :key="item.value"
          v-else-if="item.value=='usenum'"
          :label="item.label"
          min-width="90px"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{scope.row.usenum}}</span>
          </template>
        </el-table-column>
        <el-table-column
          :key="item.value"
          label="操作"
          align="center"
          v-else-if="item.value=='opt' && optShowTwo"
        >
          <template slot-scope="scope">
            <el-button
              v-if="global.powerAllBtn.cwgl.qytkspBtn"
              @click="handleClick(scope.row)"
              type="text"
              size="small"
            >审批</el-button>
            <!-- <el-button
              v-else
              @click="handleClick(scope.row)"
              type="text"
              size="small"
            >详情</el-button> -->
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="pageBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="pageChange"
        :current-page="pages.pageNum"
        :page-sizes="[10,20, 30, 50,100]"
        :page-size="pages.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        background
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="manageShow"
      width="700px"
      :close-on-click-modal="false"
      class="jhdialog"
    >
      <div class="comTitle clearfix">
        <div
          class="titleName fl"
          v-html="companyInfo.companyname"
        ></div>
        <div :class="{'fr':true,'status':true}">{{status}}</div>
      </div>
      <div style="padding:0 20px 20px;">
        <div class="title">退款信息</div>
        <ul class="info clearfix">
          <li>
            <div class="info-label">退款企业名称:</div>
            <div
              class="infoText"
              v-html="companyInfo.companyname"
            ></div>
          </li>
          <li>
            <div class="info-label">退款金额:</div>
            <div
              class="infoText red"
              v-html="`${companyInfo.refundnum}元`"
            ></div>
          </li>
          <li>
            <div class="info-label">退款账户名称:</div>
            <div
              class="infoText"
              v-html="companyInfo.restorenum"
            ></div>
          </li>
          <li>
            <div class="info-label">申请时间:</div>
            <div
              class="infoText"
              v-html="companyInfo.insertdate"
            ></div>
          </li>
          <li>
            <div class="info-label">退款银行账号:</div>
            <div
              class="infoText"
              v-html="companyInfo.usenum"
            ></div>
          </li>
          <li style="width: 100%">
            <div class="info-label">退款银行:</div>
            <div
              class="infoText"
              v-html="companyInfo.banktype"
            ></div>
          </li>
        </ul>
        <div class="border-dashed">
          <div class="title">退款处理结果</div>
          <div style="height:40px;display: flex;align-items: center;">
            <el-radio-group
              v-model="refundResult"
              style="padding:0 20px"
              @change="resultChange"
            >
              <el-radio label="1">成功</el-radio>
              <el-radio label="2">未成功</el-radio>
            </el-radio-group>
            <div v-show="refundResult==='2'">备注：
              <el-input
                style="width:300px"
                placeholder="请填写未通过原因"
                v-model="failReason"
              ></el-input>
            </div>
          </div>
          <div
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="cancel">取 消</el-button>
            <el-button
              class="button"
              type="primary"
              @click="submit"
            >提 交</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped lang="less">
.info {
  margin-bottom: 20px;
  li {
    float: left;
    width: 50%;
    padding: 10px 0;
    .info-label {
      color: #999;
      display: inline-block;
      width: 120px;
      text-align: right;
    }
    .infoText {
      color: #404040;
      display: inline-block;
    }
    img {
      vertical-align: top;
    }
  }

  .special {
    width: 100%;
  }
}
.dialog-footer {
  text-align: center;
  margin-top: 20px;
}
</style>
<script>
export default {
  data () {
    return {
      tableData: [],
      tableColumn: [{ label: "企业名称", value: "companyname" },
      { label: "退款银行", value: "banktype" },
      { label: "退款银行账户", value: "usenum" },
      { label: "退款账户人", value: "restorenum" },
      { label: "退款金额(元)", value: "refundnum" },
      { label: "申请时间", value: "insertdate" },
      { label: "操作", value: "opt" }],
      pages: {
        total: 10,
        pageNum: 1,
        pageSize: 10
      },
      manageShow: false,
      companyInfo: {},
      failReason: '',
      refundResult: "1", //退款结果
      status: "待处理",
      // optShowOne: false,
      optShowTwo: false,
    }
  },
  props: ['type'],
  mounted () {
    this.global = this.GLOBAL;
    let department = JSON.parse(localStorage.getItem('userinfo')).department;
    if (department == "退款二部") {
      this.optShowTwo = true
    }
    this.getList()
  },
  methods: {
    handleSizeChange (val) {
      this.pages.pageSize = val;
      this.pages.pageNum = 1;
      this.getList()
    },
    // getList (page) {
    //   let params = {
    //     pagenum: "1",
    //     status: 0,
    //     pagesize: this.Page.pageSize,
    //     // province: this.searchData.province, //省份编码
    //     // city: this.searchData.city, //城市编码
    //     // area: this.searchData.area, //区域编码
    //     // begintime: this.searchData.begintime,
    //     // endtime: this.searchData.endtime,

    //   };
    //   // if (this.searchData.begintime && this.searchData.endtime && Date.parse(this.searchData.begintime) > Date.parse(this.searchData.endtime)) {
    //   //   this.$message({
    //   //     message: "结束时间不能早于开始时间",
    //   //     type: "warning"
    //   //   });
    //   //   return;
    //   // }
    //   this.$axios
    //     .post("/app/v1/platform/company/refundList", params)
    //     .then(res => {
    //       if (res.data.message === "success.") {
    //         let result = res.data.data;
    //         this.tableData = result.list;
    //         // this.pageSize = Number(result.pagesize ? result.pagesize : 10);
    //         // this.totalNum = Number(result.totalnum);
    //         this.Page.total = Number(result.totalnum);
    //         // this.cpage = page ? Number(page) : 1;
    //       } else {
    //         this.$message({
    //           message: res.data.message,
    //           type: "error"
    //         });
    //       }
    //     }).catch({});
    // },


    //获取列表
    getList () {
      if (!this.type) {
        return;
      }
      this.loading = true;

      this.$axios.post('/app/v1/platform/unusual/todoList', {
        "type": this.type,
        pagesize: this.pages.pagesize,
        pagenum: this.pages.pageNum
      }).then(resp => {
        if (resp.data.code == '1') {
          this.tableData = resp.data.data.list;
          this.pages.total = Number(resp.data.data.totalnum);
          this.pages.pagesize = Number(resp.data.data.pagesize);
          this.loading = false;
        }
      })
    },
    pageChange (p) {
      this.pages.pageNum = p;
      // let page = p.toString();
      this.getList();
    },
    handleClick (r) {
      this.companyInfo = r;
      this.manageShow = true;
      this.failReason = "";
    },
    //待办提交
    reportCall (data) {
      this.$axios.post('app/v1/platform/unusual/todoHandleSubmit',
        data
      ).then(resp => {
        if (resp.data.message === 'success.') {
          this.warnDialogVisible = false;
          this.dialogVisible = false;
          // this.tableData = resp.data.data;
          // this.pages.total = resp.data.data.length;
          this.loading = false;
          this.getList();
        } else {
          this.warnDialogVisible = false;
          this.dialogVisible = false;
          this.$message({
            message: resp.data.message,
            type: "error"
          });
        }
      })

    },
    resultChange (r) {
      if (r === "1") this.failReason = "";
    },
    cancel () {
      this.manageShow = false;
      this.failReason = "";
    },
    submit () {
      if (this.refundResult === "2" && !this.failReason.trim()) {
        this.$message({
          message: "请填写驳回原因!",
          type: "warning"
        });
        return;
      }
      if (this.refundResult === "1") {
        this.$confirm("是否处理该退款?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let params = {
            refundid: this.companyInfo.orderid,
            status: this.refundResult,
            remark: this.failReason
          };
          this.$axios
            .post("/app/v1/platform/company/refundResult", params)
            .then(res => {
              if (res.data.message === "success.") {
                this.$message({
                  message: "操作成功!",
                  type: "success"
                });
                // let currentData = {
                //   reportid: this.companyInfo.reportid,
                //   status: 1,
                //   content: '同意处理'
                // }
                // this.reportCall(currentData)
                this.getList("1");

              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
                this.getList("1");
              }
            });
          this.manageShow = false;
        });
      } else {
        this.$confirm("是否驳回该用户的退款申请?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let params = {
            refundid: this.companyInfo.orderid,
            status: this.refundResult,
            remark: this.failReason
          };
          this.$axios
            .post("/app/v1/platform/company/refundResult", params)
            .then(res => {
              if (res.data.message === "success.") {
                this.$message({
                  message: "操作成功!",
                  type: "success"
                });
                // let currentData = {
                //   reportid: this.companyInfo.reportId,
                //   status: 2,
                //   content: '不同意处理'
                // }
                // this.reportCall(currentData)
                this.getList("1");
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
                this.getList("1");
              }
            });
          this.manageShow = false;
        });
      }
    },


  }
}
</script>
